
import React ,{lazy,Suspense}from 'react';


import {setScrollTop,changeTdk,goSystem} from '../../assets/js/utils/index';
import request from '../../assets/js/utils/request';
import Css from '../../assets/css/index/index.css';
import 'swiper/swiper-bundle.css';
import Hoc from './indexhoc';

import ScrollAnim from 'rc-scroll-anim';

//挂载 Mock
import '../../mock/data.js'

const ScrollParallax = ScrollAnim.Parallax;



const Nav=lazy(()=>import('../../components/nav/index'));
const RNav=lazy(()=>import('../../components/rNav/index'));
const Foot=lazy(()=>import('../../components/foot/index'));
//无状态组件存UI开发首页
const IndexComponent=Hoc((props)=>{
    return(
        <React.Fragment >
            <div className={Css['banSwiper']+' banSwiper'}>
                <div className='swiper-wrapper'>
                    {
                        props.props.aBan.length>0?
                            props.props.aBan.map((item,index)=>{
                                return(
                                    <div className={Css['banSwiperSlide']+' swiper-slide'} key={index} onClick={props.goPages.bind(this,item.url)}>
                                        <div className={Css['swiper_slide_bg']+' swiper-lazy'} data-background={item.img}>
                                            <div className='Loading'></div>
                                        </div>
                                        {
                                            index!==2?
                                                <div className={Css['banSwiperBox']+' myCustomPrefix_animated myCustomPrefix_bounce'}  >
                                                    <div className={Css['banSwiperTitle']} >{item.title}</div>
                                                    <div className={Css['banSwiperList']}>{item.list}</div>
                                                </div>
                                                :''
                                        }
                                    </div>
                                )
                            })
                            :''
                    }
                </div>
                <div className={Css['swiperSagination']+" swiper-pagination"}></div>
                <div className="swiper-button-prev"></div>
                <div className="swiper-button-next"></div>
            </div>
            <div className={Css['indSuccess']} id='indSuccess' >
                <ScrollParallax
                    animation={{y:0,scale: 1,opacity: 1 , playScale: [0.25, 0.6]}}
                    className={Css['ScrollParallax']}
                    location='indSuccess'
                >
                    <div className={Css['indSuccessTitle']}>企业成222222功<span>=</span>战略<span>x</span>组织能力</div>
                    <div className={Css['indSuccessList']}>从员工出发，关爱员工，激发员工</div>
                </ScrollParallax>
            </div>
            <div className={Css['indTitle']}>
                构建企业和员工共生共赢的关爱生态圈
            </div>
            <div className={Css['indEco']}>
                {
                    props.props.aEco.length>0?
                        props.props.aEco.map((item,index)=>{
                            return(
                                <div className={Css['indEcoGro']} key={index}>
                                    {
                                        index === 0?
                                            <React.Fragment>
                                                <div className={Css['indEcoImg']}><img src={item.img} alt={item.title}/><p></p></div>
                                                <div className={Css['indEcoFont']}>
                                                    <div className={Css['indEcoFontTitle']}>{item.title}</div>
                                                    <div className={Css['indEcoFontList']}>{item.describe}</div>
                                                    <div className={Css['indEcoFontBtn']}>
                                                        {
                                                            item.aUrl.length>0?
                                                                item.aUrl.map((item2,index2)=>{
                                                                    return(
                                                                        <div key={index2} onClick={props.goPages.bind(this,item2.url)}>{item2.title}</div>
                                                                    )
                                                                })
                                                                :''
                                                        }
                                                    </div>
                                                </div>
                                            </React.Fragment>
                                            :index === 1?
                                            <React.Fragment>
                                                <div className={Css['indEcoFont']}>
                                                    <div className={Css['indEcoFontTitle']}>{item.title}</div>
                                                    <div className={Css['indEcoFontList']}>{item.describe}</div>
                                                    <div className={Css['indEcoFontBtn']}>
                                                        {
                                                            item.aUrl.length>0?
                                                                item.aUrl.map((item2,index2)=>{
                                                                    return(
                                                                        <div key={index2} onClick={props.goPages.bind(this,item2.url)}>{item2.title}</div>
                                                                    )
                                                                })
                                                                :''
                                                        }
                                                    </div>
                                                </div>
                                                <div className={Css['indEcoImg']}><img  src={item.img} alt={item.title}/></div>
                                            </React.Fragment>
                                            :''
                                    }

                                </div>
                            )
                        })
                        :''
                }
            </div>
            <div className={Css['indBigSwiper']+' swiper-container'} id="gallery">
                <div className="swiper-wrapper">
                    {
                        props.props.aPro.length>0?
                            props.props.aPro.map((item,index)=>{
                                return(
                                    <div className={Css['swiperSlidePro']+" swiper-slide"} key={index}  onClick={props.goPages.bind(this,item.sUrl)}>
                                        <div className={Css['indProBigSwiperBg']+' swiper-lazy'}  >
                                            <img src={item.img} alt={item.title} />
                                            <div className="Loading"></div>
                                            <div className={Css['indProBigSwiperFont']}>
                                                <div className={Css['indProBigSwiperFontTitle']} dangerouslySetInnerHTML={{__html:item.title}}></div>
                                                <div className={index===2?Css['indProBigSwiperFontList']+' '+Css['indProBigSwiperFontListDis']:Css['indProBigSwiperFontList']}>
                                                    {
                                                        item.list.length>0?
                                                            item.list.map((item2,index2)=>{
                                                                return(
                                                                    <p key={index2}><i className={'indSure'}></i>{item2.title}</p>
                                                                )
                                                            })
                                                            :''
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                            :''
                    }


                </div>
            </div>
            <div className={Css['indProSmallSwiper']+" swiper-container"} id="thumbs">
                <div className="swiper-wrapper">
                    {
                        props.props.aPro.length>0?
                            props.props.aPro.map((item,index)=>{

                                return(
                                    <div className={Css['onMouseEnter']+' swiper-slide'} key={index} onMouseEnter={props.onMouseEnter.bind(this,index)}  onClick={props.goPages.bind(this,item.sUrl)}>
                                        <div className={Css['indProSmallSwiperTitle']}>
                                            <i className={item.icn}></i>
                                            {item.sTitle}
                                        </div>
                                    </div>
                                )

                            })
                            :''
                    }

                </div>
            </div>
            <div className={Css['indRes']}>
                <div className={Css['indRes_bg']} ><img className={'rellax'} src="//www.guanaitong.com/images/2020/public/loading.gif" data-echo={props.props.aGraBg} alt={props.props.aGraBgAlt} data-rellax-percentage="0.6" data-rellax-speed="-3"/> </div>
                <div className={Css['indResCen']}>
                    <div className={Css['indTitle']+' '+Css['indTitleRes']}><img src="//www.guanaitong.com/images/2020/public/loading.gif"  data-echo={props.props.aGraLogo} alt={props.props.aGraLogoAlt}/></div>
                    <ul>
                        {
                            props.props.aGra.length>0?
                                props.props.aGra.map((item,index)=>{
                                    return(
                                        <li key={index}>
                                            <div className={Css['indResCenImg']} onClick={props.goPages.bind(this,item.listUrl)}>
                                                <img src="//www.guanaitong.com/images/2020/public/loading.gif" data-echo={item.img} alt={item.imgTitle}/>
                                                <div className={Css['indResCenImgTitle']}>{item.imgTitle}</div>
                                            </div>
                                            <div className={Css['line']}></div>
                                            <div className={Css['indResCenTitle']+' ovflOne'}onClick={props.goPages.bind(this,item.listUrl)}>{item.title}</div>
                                            <div className={Css['indResCenList']+' '+Css['indResCenListH']} onClick={props.goPages.bind(this,item.listUrl)}>{item.list}</div>
                                            {
                                                item.listTitle!==undefined?
                                                    item.listTitle.map((item2,index2)=>{
                                                        return(
                                                            <React.Fragment key={index2}>
                                                                {index2===0?<div className={Css['indResCenTitle']+' ovflOne'} ></div>:''}
                                                                <div className={Css['indResCenTitle']+' '+Css['indResCenTitleH']+' ovflOne'} onClick={props.goPages.bind(this,item.listUrl)}>{item2.title}</div>
                                                            </React.Fragment>
                                                        )
                                                    })
                                                    :''
                                            }

                                            <div className={Css['indResCenBtn']} onClick={props.goPages.bind(this,item.btnUrl)}>{item.btnTitle}</div>
                                        </li>
                                    )
                                })
                                :''
                        }


                    </ul>
                </div>
            </div>
            <div className={Css['indNews']}>
                <div className={Css['indNews_bg']}><img className={'rellax'} src="//www.guanaitong.com/images/2020/public/loading.gif" data-echo={require('../../assets/images/index/ind13.jpg')} alt={'asd'} data-rellax-percentage="0.9" data-rellax-speed="-2"/></div>
                <div className={Css['indTitle']+' '+Css['indTitleNew']}>新闻中心</div>
                <div className={Css['indNewsCen']}>
                    {
                        props.props.aNews.length>0?
                            props.props.aNews.slice(0,1).map((item,index)=>{
                                return(
                                    <React.Fragment key={index}>
                                        <div className={Css['indNewsCenTitle']}>{item.cat_name}</div>
                                        <ul className={Css['indNewCenDyn']}>
                                            {
                                                item.news.map((item2,index2)=>{
                                                    return(
                                                        <li key={index2} onClick={props.goPages.bind(this,item2.link)}>
                                                            <div className={Css['indNewsCenDynImg']}>
                                                                <img src="//www.guanaitong.com/images/2020/public/loading.gif" data-echo={item2.thumb} alt={'asd'} />
                                                            </div>
                                                            <div className={Css['indNewsCenDynFont']}>
                                                                <div className={Css['indNewsCenDynFontTime']}>{item2.publish_time}</div>
                                                                <div className={Css['indNewsCenDynFontTitle']+" ovflOne"}>{item2.title}</div>
                                                                <div className={Css['indNewsCenDynFontList']+" ovflFro"}>{item2.body}</div>
                                                            </div>
                                                        </li>
                                                    )
                                                })
                                            }
                                        </ul>
                                        <div className={Css['indMore']} onClick={props.goPages.bind(this,'https://www.guanaitong.com/list-9-1.html?cat_id_2='+item.cat_id)}>了解更多<i></i></div>
                                        <div className={Css['line']+" mt30 mb30 clearfix "}></div>
                                    </React.Fragment>
                                )
                            })
                            :''
                    }
                    <div className={Css['indNew11_18']}>
                        {
                            props.props.aNews.length>0?
                                props.props.aNews.slice(1,3).map((item,index)=>{
                                    return(
                                        <div className={Css['indNew11_18_l']} key={index}>
                                            <div className={Css['indNewsCenTitle']}>{item.cat_name}</div>
                                            <ul className={Css['indNewCenDyn']+'  '+Css['indNewCenAct']}>
                                                {
                                                    item.news.slice(0,1).map((item2,index2)=>{
                                                        return(
                                                            <li key={index2}  onClick={props.goPages.bind(this,item2.link)}>
                                                                <div className={Css['indNewsCenDynFont']}>
                                                                    <div className={Css['indNewsCenDynFontTime']}>{item2.publish_time}</div>
                                                                    <div className={Css['indNewsCenDynFontTitle']+" ovflOne"}>{item2.title}</div>
                                                                    <div className={Css['indNewsCenDynFontList']+" ovflThr"}>{item2.body}</div>
                                                                </div>
                                                            </li>
                                                        )
                                                    })
                                                }
                                            </ul>
                                            <div  className={Css['indMore']} onClick={props.goPages.bind(this,'https://www.guanaitong.com/list-9-1.html?cat_id_2='+item.cat_id)}>了解更多<i></i></div>
                                        </div>
                                    )
                                })
                                :''
                        }


                    </div>

                </div>
            </div>
            <div className={Css['indCli']}>
                <div className={Css['indTitle']+' '+Css['indTitleCli']}>服务客户&合作伙伴</div>
                <div className={Css['indCliSwiper']+' indCliSwiper2'}>
                    <div className="swiper-wrapper">
                        {
                            props.props.aCli.length>0?
                                props.props.aCli.map((item,index)=>{
                                    return(
                                        <div className={Css['swiper-slide']+' swiper-slide'} key={index}>
                                            <img className="swiper-lazy" data-src={item.img} alt={item.title}/>
                                            <div className="Loading"></div>
                                        </div>
                                    )
                                })
                                :''
                        }

                    </div>
                    <div className={Css['indCliSwiperSagination']+' indCliSwiperSagination'}></div>
                    <div className={Css['indCliSwiperNext']+' indCliSwiperNext'}></div>
                    <div className={Css['indCliSwiperPrev']+' indCliSwiperPrev'}></div>
                </div>
                <div className={Css['indCliSwiper']+' indCliSwiper3'}>
                    <div className="swiper-wrapper">
                        {
                            props.props.aCli2.length>0?
                                props.props.aCli2.map((item,index)=>{
                                    return(
                                        <div className={Css['swiper-slide']+' swiper-slide'} key={index}>
                                            <img className="swiper-lazy" data-src={item.img} alt={item.title}/>
                                            <div className="Loading"></div>
                                        </div>
                                    )
                                })
                                :''
                        }

                    </div>
                    <div className={Css['indCliSwiperSagination']+' indCliSwiperSagination'}></div>
                    <div className={Css['indCliSwiperNext']+' indCliSwiperNext'}></div>
                    <div className={Css['indCliSwiperPrev']+' indCliSwiperPrev'}></div>
                </div>
            </div>
            <div className={Css['indPla']}>
                <div className={Css['indPla_bg']+'  rellax'} data-rellax-percentage="0.4" data-rellax-speed="-5" >
                    <img className={'rellax'} src="//www.guanaitong.com/images/2020/public/loading.gif" data-echo={require('../../assets/images/index/ind16.jpg')} alt={'asd'} data-rellax-percentage="2.5" data-rellax-speed="-2"/>
                </div>
                <div className={Css['indPlaTitle']}>一站式全场景员工福利平台<p><span>“互联网+”重构组织和员工关系</span><br/>与企业共同构建创新、融合的人力资源策略</p></div>

                <div className={Css['indPlaCen']}>
                    <ul>
                        <li>
                            <i className={'forli'}></i>
                            福利智造<br/>垂直深耕
                        </li>
                        <li>
                            <i className={'employees'}></i>
                            企业员工<br/>共生共赢
                        </li>
                        <li>
                            <i className={'cloud'} ></i>
                            福利云平台<br/>统筹管理
                        </li>
                        <li>
                            <i className={'diversity'}></i>
                            PaaS+SaaS<br/>多元融合
                        </li>
                    </ul>
                    <div className={Css['indPlaBtn']} id='indBotTy' onClick={props.goPages.bind(this,'from')}>全套平台体验 立刻申请</div>
                </div>
            </div>
        </React.Fragment>
    )
})
class Index extends React.Component{
    constructor(){
        super();
        this.state={
            title:'员工福利方案_中秋新年礼品_企业福利平台-中智关爱通',
            description:'关爱通是中智旗下品牌，央企服务保证，提供完整员工福利解决方案，企业福利平台定制，为企业提供春节、端午、中秋、新年等各节日员工礼物，以及生日福利、员工激励发放，员工体检，一站式弹性福利平台。售前咨询:400-920-6969',
            keywords:'员工福利方案_中秋新年礼品_企业福利平台-中智关爱通',
            aGraBg:require('../../assets/images/index/ind9.jpg'),
            aGraBgAlt:'关爱通研究院',
            aGraLogo:require('../../assets/images/index/ind11.png'),
            aGraLogoAlt:'关爱通研究院logo',
            aBan:[],
            aEco:[],
            aPro:[],
            aGra:[],
            aNews:[],
            aCli:[],
            aCli2:[]
        }
    }
    componentDidMount(){
        this.goSystem();
        this.getABanData();
        this.getAEcoData();
        this.getAProData();
        this.getAGraData();
        this.getANewsData();
        this.getACliData();
        changeTdk(this.state.title,this.state.description,this.state.keywords);
        setScrollTop(window.base.pages.index.iScrollTop);
    }
    //判断跳转平台
    goSystem(){
        goSystem(this.props,'');
    }
    //获取banner数据
    getABanData(){
        let data=[
            {
                img:require("../../assets/images/index/ind1.jpg"),
                title:'激发组织活力',
                list:'帮助企业把更好的“给”“到”员工',
                url:'growingup'
            },
            {
                img:require("../../assets/images/index/ind2.jpg"),
                title:'赋能组织 智慧商业',
                list:'与企业共同构建创新，融合的人力资源策略',
                url:'bigbus'
            },
            {
                img:require("../../assets/images/index/ind17.jpg"),
                url:'compliance'
            }
        ];
        this.setState({aBan:data})
    }
    //获取生态圈数据
    getAEcoData(){
        let temAEco=[
            {
                img:require('../../assets/images/index/ind3.jpg'),
                title:'大企业 员工关爱共生平台',
                describe:'打造具备高度融合性、延展性的PaaS+SaaS员工关爱共生平台，帮助企业实现员工关爱的持续优化与快速创新。',
                aUrl:[
                    {
                        title:'了解详情',
                        url:'bigbus'
                    },
                    {
                        title:'申请试用',
                        url:'from'
                    }
                ]
            },
            {
                img:require('../../assets/images/index/ind4.jpg'),
                title:'成长型企业 员工关爱平台',
                describe:'提供超万家企业客户认可的标准化员工关爱平台，200+应用覆盖全场景预算管理，实现一站式员工福利统筹。',
                aUrl:[
                    {
                        title:'了解详情',
                        url:'growingup'
                    },
                    {
                        title:'申请试用',
                        url:'from'
                    }
                ]
            }
        ];
        this.setState({aEco:temAEco})
    }
    //获取产品数据
    getAProData(){
        let temAPro=[
            {
                img:require('../../assets/images/index/ind5.jpg'),
                title:'一站式全场景员工福利平台',
                list:[
                    {
                        title: '提高员工满意度'
                    },
                    {
                        title: '企业成本节省高达39%'
                    }
                ],
                sTitle:'弹性福利',
                sUrl:'benefit',
                icn:'indBenefits',
            },
            {
                img:require('../../assets/images/index/ind6.jpg'),
                title:'九大主要节日福利<br/>福利预算灵活管理',
                list:[
                    {
                        title: '标准套餐，十五团购，年节额度'
                    }
                ],
                sTitle:'节日福利',
                sUrl:'nj',
                icn:'indFeasts',
            },
            {
                img:require('../../assets/images/index/ind7.jpg'),
                title:'员工职场需求一站统筹管理',
                list:[
                    {
                        title: '一战全面统筹'
                    },
                    {
                        title: '覆盖多样场景'
                    },
                    {
                        title: '高效资金规划'
                    },
                    {
                        title: '操作流畅便捷'
                    },
                    {
                        title: '确保合法合规'
                    }
                ],
                sTitle:'员工午餐/交通/培训',
                sUrl:'scene',
                icn:'indBring',
            },
            {
                img:require('../../assets/images/index/ind8.jpg'),
                title:'员工心理关怀',
                list:[
                    {
                        title: '全面eap服务'
                    },
                    {
                        title: 'eap专案项目'
                    },
                    {
                        title: 'eap活动&培训'
                    }
                ],
                sTitle:'员工心理关怀',
                sUrl:'eap',
                icn:'indCaring',
            }
        ]
        this.setState({aPro:temAPro})
    }
    //获取研究院数据
    getAGraData(){
        let temAGra=[
            {
                img:require('../../assets/images/index/ind10.jpg'),
                imgTitle:'福利报告',
                title:'《2019-2020企业员工福利管理实践白皮书》',
                list:'中智咨询人力资本数据中心联合中智关爱通于2019年3月一8月在全国范围内开展了企业福利调研，调研内容涵盖企业中智咨询人力资本数据中心联合中智关爱通于2019年3月一8月在全国范围内开展了企业福利调研',
                listUrl:'img',
                btnTitle:'获取报告',
                btnUrl:'btn',
            },
            {
                img:require('../../assets/images/index/ind11.jpg'),
                imgTitle:'最新研究',
                title:'盘点丨十二词告诉你疫情元年我们都经历了什么',
                list:'到了年末，没成想忙碌几个月的“年会”大戏，也瞬间推倒重来，一切似曾相识，恍恍惚惚似乎又回到了2020年初，从头开始。2020当被称为“疫情元年”，因为从目前的情形来看，今后几年都将带上“疫情”的深刻烙印',
                listUrl:'img',
                btnTitle:'了解详情',
                btnUrl:'btn',
            },
            {
                img:require('../../assets/images/index/ind12.jpg'),
                imgTitle:'近期活动',
                title:'· αi优质职场计划',
                list:'由人民网上海、中智上海、关爱通共同主办，旨在推选职场建设的优秀实践、树立优秀榜样的大型职场公益项目。',
                listUrl:'img',
                listTitle:[
                    {
                        title:'你应该了解的αi优质职场',
                        url:'img'
                    },
                    {
                        title:'αi优质职场实践案例',
                        url:'img'
                    }
                ],
                btnTitle:'了解详情',
                btnUrl:'btn',
            }]
        this.setState({aGra:temAGra})
    }
    //获取新闻中心数据
    getANewsData(){
        let temANews=[],
            sUrl=window.base.config.baseUrl+'news-limit-3';
        request(sUrl,'get').then((res)=>{
            if (res.code===0){
                temANews=res.data.list1

            }
            this.setState({aNews:temANews})
        })
    }
    //获取服务客户数据
    getACliData(){
        let temACli=[
                {
                    img:require('../../assets/images/index/ind21.png'),
                    title:'logo1'
                },
                {
                    img:require('../../assets/images/index/ind12.png'),
                    title:'logo2'
                },
                {
                    img:require('../../assets/images/index/ind13.png'),
                    title:'logo3'
                },
                {
                    img:require('../../assets/images/index/ind14.png'),
                    title:'logo4'
                },
                {
                    img:require('../../assets/images/index/ind15.png'),
                    title:'logo5'
                },
                {
                    img:require('../../assets/images/index/ind26.png'),
                    title:'logo6'
                },
                {
                    img:require('../../assets/images/index/ind27.png'),
                    title:'logo7'
                },
                {
                    img:require('../../assets/images/index/ind28.png'),
                    title:'logo8'
                },
                {
                    img:require('../../assets/images/index/ind29.png'),
                    title:'logo9'
                },
                {
                    img:require('../../assets/images/index/ind30.png'),
                    title:'logo10'
                },
                {
                    img:require('../../assets/images/index/ind31.png'),
                    title:'logo12'
                },
                {
                    img:require('../../assets/images/index/ind32.png'),
                    title:'logo13'
                },
                {
                    img:require('../../assets/images/index/ind33.png'),
                    title:'logo14'
                },
                {
                    img:require('../../assets/images/index/ind34.png'),
                    title:'logo15'
                },
                {
                    img:require('../../assets/images/index/ind35.png'),
                    title:'logo16'
                },
                {
                    img:require('../../assets/images/index/ind36.png'),
                    title:'logo17'
                },
                {
                    img:require('../../assets/images/index/ind37.png'),
                    title:'logo18'
                },
                {
                    img:require('../../assets/images/index/ind38.png'),
                    title:'logo19'
                },
                {
                    img:require('../../assets/images/index/ind39.png'),
                    title:'logo20'
                },
                {
                    img:require('../../assets/images/index/ind40.png'),
                    title:'logo21'
                },
                {
                    img:require('../../assets/images/index/ind54.png'),
                    title:'logo22'
                },
                {
                    img:require('../../assets/images/index/ind55.png'),
                    title:'logo23'
                }
            ],
            temACli2=[
                {
                    img:require('../../assets/images/index/ind16.png'),
                    title:'logo1'
                },
                {
                    img:require('../../assets/images/index/ind17.png'),
                    title:'logo2'
                },
                {
                    img:require('../../assets/images/index/ind18.png'),
                    title:'logo3'
                },
                {
                    img:require('../../assets/images/index/ind19.png'),
                    title:'logo4'
                },
                {
                    img:require('../../assets/images/index/ind20.png'),
                    title:'logo5'
                },
                {
                    img:require('../../assets/images/index/ind41.png'),
                    title:'logo6'
                },
                {
                    img:require('../../assets/images/index/ind42.png'),
                    title:'logo7'
                },
                {
                    img:require('../../assets/images/index/ind43.png'),
                    title:'logo8'
                },
                {
                    img:require('../../assets/images/index/ind44.png'),
                    title:'logo9'
                },
                {
                    img:require('../../assets/images/index/ind45.png'),
                    title:'logo10'
                },
                {
                    img:require('../../assets/images/index/ind46.png'),
                    title:'logo12'
                },
                {
                    img:require('../../assets/images/index/ind47.png'),
                    title:'logo13'
                },
                {
                    img:require('../../assets/images/index/ind48.png'),
                    title:'logo14'
                },
                {
                    img:require('../../assets/images/index/ind49.png'),
                    title:'logo15'
                },
                {
                    img:require('../../assets/images/index/ind50.png'),
                    title:'logo16'
                },
                {
                    img:require('../../assets/images/index/ind51.png'),
                    title:'logo17'
                },
                {
                    img:require('../../assets/images/index/ind52.png'),
                    title:'logo18'
                },
                {
                    img:require('../../assets/images/index/ind53.png'),
                    title:'logo19'
                }
            ];
        this.setState({aCli:temACli,aCli2:temACli2})
    }
    //页面离开时调用，页面离开时去除滚动事件解决页面切换时内存泄漏，
    componentWillUnmount(){
        window.removeEventListener('scroll',setScrollTop());
        this.setState=(state,callback)=>{
            return;
        }
    }

    render(){
        let newsPprops={
            props:this.props,
            aBan:this.state.aBan,
            aEco:this.state.aEco,
            aPro:this.state.aPro,
            aGraBg:this.state.aGraBg,
            aGraBgAlt:this.state.aGraBgAlt,
            aGraLogo:this.state.aGraLogo,
            aGraLogoAlt:this.state.aGraLogoAlt,
            aGra:this.state.aGra,
            aNews:this.state.aNews,
            aCli:this.state.aCli,
            aCli2:this.state.aCli2
        }
        return(
            <div >
                <Suspense　fallback={<div className={'loadWidth'}></div>} >
                    {/*导航*/}
                    <Nav props={this.props}></Nav>
                    {/*导航*/}
                    {/*右导航*/}
                    <RNav props={this.props}></RNav>
                    {/*右导航*/}
                </Suspense >
                <IndexComponent props={{...newsPprops}}></IndexComponent>
                <Suspense　fallback={<React.Fragment/>} >
                    {/*foot*/}
                    <Foot  props={this.props}></Foot>
                    {/*foot*/}
                </Suspense>

            </div>

        )
    }
}
export default Index


